<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="120px" inline>
      <el-form-item label="报工编号">
        <el-input v-model="searchForm.productionReportCode" placeholder="报工编号" clearable/>
      </el-form-item>
      <el-form-item label="报工名称">
        <el-input v-model="searchForm.productionReportName" placeholder="报工名称" clearable/>
      </el-form-item>
      <el-form-item label="报工类型">
        <el-select style="width: 150px" clearable v-model="searchForm.productionReportType"
                   placeholder="报工类型">
          <el-option
              v-for="dictData in productionReportTypeDictDataList"
              :key="dictData.id"
              :value="dictData.id"
              :label="dictData.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务Id">
        <el-input v-model="searchForm.workflowProcessId" placeholder="任务Id" clearable/>
      </el-form-item>
      <el-form-item label="工单ID">
        <el-input v-model="searchForm.productionOrderId" placeholder="工单ID" clearable/>
      </el-form-item>
      <el-form-item label="工作站编号">
        <el-input v-model="searchForm.workstationCode" placeholder="工作站编号" clearable/>
      </el-form-item>
      <el-form-item label="报工状态">
        <el-select style="width: 150px" clearable v-model="searchForm.status" placeholder="报工状态">
          <el-option
              v-for="dictData in productionReportStatusDictDataList"
              :key="dictData.id"
              :value="dictData.id"
              :label="dictData.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadProductionReportList">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增报工</el-button>
    <el-button type="danger" @click="handleBatchDelete" :disabled="selectedProductionReport.length === 0">批量删除</el-button>
  </div>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-table :data="productionReportList" stripe border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="productionReportCode" label="报工编号"/>
      <!-- 插槽 -->
      <el-table-column label="报工类型">
        <template #default="scope">
          {{ scope.row.productionReportType == 36 ? '自行报工' : '企业报工' }}
        </template>
      </el-table-column>
      <el-table-column prop="workstationCode" label="工作站编号"/>
      <el-table-column prop="workflowProcess.process.processName" label="工序"/>
      <el-table-column prop="productionOrder.productionOrderCode" label="生产工单编号"/>
      <el-table-column prop="productionOrder.material.code" label="产品物料编码"/>
      <el-table-column prop="productionOrder.material.name" label="产品物料名称"/>
      <el-table-column prop="productionOrder.material.specification" label="规格型号"/>
      <el-table-column prop="productionOrder.material.unit.name" label="单位"/>
      <el-table-column prop="productionReportQuantity" label="报工数量"/>
      <el-table-column prop="creatorId" label="报工人"/>
      <el-table-column prop="createTime" label="报工时间"/>
      <el-table-column prop="updatorId" label="审核人"/>
      <!-- 插槽 -->
      <el-table-column label="状态">
        <template #default="scope">
          {{ scope.row.status == 38 ? '待检测' : scope.row.status == 39 ? '待审核' : '已完成' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.status == 38" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" v-if="scope.row.status == 38" @click="handleDelete(scope.row)" type="danger">删除</el-button>
          <el-button size="small" v-if="scope.row.status == 39" @click="handleReview(scope.row)">待审核</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
  <!-- 分页栏 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 新增/编辑报工弹窗 -->
  <el-dialog :title="dialogTitle" v-model="addOrUpdateDialogVisible" @close="closeDialog" width="80%">
    <el-form :model="productionReportForm" label-width="120px">
      <el-form-item label="报工类型">
        <el-select style="width: 120px" v-model="productionReportForm.productionReportType" placeholder="报工类型">
          <el-option
              v-for="dictData in productionReportTypeDictDataList"
              :value="dictData.id"
              :key="dictData.id"
              :label="dictData.dictLabel"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报工编号">
        <el-input v-model="productionReportForm.productionReportCode" placeholder="报工编号"/>
      </el-form-item>

      <el-form-item label="生产工单">
        <el-input v-model="productionReportForm.productionOrder.productionOrderCode" placeholder="生产工单">
          <template #append>
            <el-button @click="showProductionOrderList">
              <el-icon><Search/></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="工作站">
        <el-input v-model="productionReportForm.workstationCode" placeholder="工作站">
          <template #append>
            <el-button @click="showWorkstationList">
              <el-icon><Search/></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="生产任务">
        <el-input v-model="productionReportForm.workflowProcess.process.processName" placeholder="生产任务">
          <template #append>
            <el-button @click="showTaskList">
              <el-icon><Search/></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="产品编码">
        <el-input :disabled="isDetail" v-model="productionReportForm.productionOrder.material.code"/>
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input :disabled="isDetail" v-model="productionReportForm.productionOrder.material.name"/>
      </el-form-item>
      <el-form-item label="单位">
        <el-input :disabled="isDetail" v-model="productionReportForm.productionOrder.material.specification"/>
      </el-form-item>
      <el-form-item label="规格型号">
        <el-input :disabled="isDetail" v-model="productionReportForm.productionOrder.material.unit.name"/>
      </el-form-item>

      <el-form-item label="报工数量">
        <el-input v-model="productionReportForm.productionReportQuantity"/>
      </el-form-item>
      <el-form-item label="报工人">
        <el-input v-model="productionReportForm.creatorId"/>
      </el-form-item>
      <el-form-item label="报工日期">
        <el-date-picker v-model="productionReportForm.updateTime" type="date" placeholder="报工日期"/>
      </el-form-item>
      <el-form-item label="审核人">
        <el-input v-model="productionReportForm.updatorId"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 120px;" v-model="productionReportForm.status" placeholder="请选择状态" clearable>
          <el-option
              v-for="dictData in productionReportStatusDictDataList"
              :label="dictData.dictLabel"
              :value="dictData.id"
              :key="dictData.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelAddOrUpdate">取消</el-button>
        <el-button v-if="productionReportForm.status == 38 || isAdd" type="primary" @click="handlerSubmit">提交</el-button>
        <el-button v-if="productionReportForm.status == 38" @click="confirmProductionReportForm(productionReportForm)">检测通过</el-button>
        <el-button type="primary" v-if="productionReportForm.status == 39" @click="approveProductionOrderForm(productionReportForm)">审核通过</el-button>
        <el-button type="primary" v-if="productionReportForm.status == 39" @click="notApproveProductionOrderForm(productionReportForm)">审核不通过</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 工单列表弹窗 -->
  <el-dialog
      title="选择工单"
      v-model="productionOrderDialogVisible"
      width="80%"
      @close="handleProductionOrderDialogClose"
  >
    <el-row style="margin:15px">
      <el-form inline v-model="searchProductionOrderForm">
        <el-form-item label="工单编号">
          <el-input v-model="searchProductionOrderForm.productionOrderCode" placeholder="工单编号" clearable />
        </el-form-item>
        <el-form-item label="工单名称">
          <el-input v-model="searchProductionOrderForm.productionOrderName" placeholder="工单名称" clearable />
        </el-form-item>
        <el-form-item label="工单来源">
          <el-select style="width: 120px" clearable v-model="searchProductionOrderForm.productionOrderSource" placeholder="工单来源">
            <el-option label="客户订单" :value="1" />
            <el-option label="库存备货" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select style="width: 120px" clearable v-model="searchProductionOrderForm.productionOrderType" placeholder="工单类型">
            <el-option
                v-for="dictData in productionOrderTypeDictDataList"
                :value="dictData.id"
                :key="dictData.id"
                :label="dictData.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select style="width: 120px;" v-model="searchProductionOrderForm.status" placeholder="请选择状态" clearable>
            <el-option
                v-for="dictData in productionOrderStatusDictDataList"
                :label="dictData.dictLabel"
                :value="dictData.id"
                :key="dictData.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadProductionOrderList">搜索</el-button>
          <el-button @click="resetSearchProductionOrder">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin:15px">
      <el-radio-group v-model="selectedProductionOrderCode" style="width: 100%">
        <el-table
            :data="productionOrderList"
            stripe
            border
            width="100%"
        >
          <el-table-column>
            <template #default="scope">
              <!-- 绑定工单编码 -->
              <el-radio :value="scope.row.productionOrderCode"/>
            </template>
          </el-table-column>
          <el-table-column prop="productionOrderCode" label="工单编号"/>
          <el-table-column prop="productionOrderName" label="工单名称" />
          <el-table-column prop="productionOrderSource" label="工单来源">
            <template #default="scope">
              {{ scope.row.productionOrderSource == 1 ? '客户订单' : '库存备货' }}
            </template>
          </el-table-column>
          <el-table-column prop="productionOrderType" label="工单类型">
            <template #default="scope">
              {{scope.row.productionOrderType == 30 ?'自产':scope.row.productionOrderType == 31 ?'外协':'外购'}}
            </template>
          </el-table-column>
          <el-table-column prop="orderCode" label="订单编号" />
          <el-table-column prop="materialCode" label="产品/物料编号" />
          <el-table-column prop="material.name" label="产品/物料名称" />
          <el-table-column prop="material.specification" label="规格" />
          <el-table-column prop="material.unit.name" label="单位" />
          <el-table-column prop="productionOrderQuantity" label="工单数量" />
          <el-table-column label="已生产数量">
            {{ 0 }}
          </el-table-column>
          <el-table-column prop="customer.code" label="客户编号" />
          <el-table-column prop="customer.name" label="客户名称" />
          <el-table-column prop="requestDate" label="需求日期" />
          <el-table-column prop="status" label="状态" >
            <template #default="scope">
              {{scope.row.status == 0 ? '草稿':scope.row.status == 1 ? '已确认': scope.row.status == 2? '已审核' : '已完成'}}
            </template>
          </el-table-column>
        </el-table>
      </el-radio-group>
    </el-row>
    <el-row>
      <el-button @click="doSelectProductionOrder">确定</el-button>
    </el-row>
  </el-dialog>

  <!-- 工作站列表弹窗 -->
  <el-dialog
      title="选择工作站"
      v-model="workstationDialogVisible"
      width="80%"
      @close="handleWorkstationDialogClose"
  >
    <el-row style="margin:15px">
      <el-form inline v-model="searchWorkstationForm">
        <el-form-item label="工作站编号">
          <el-input v-model="searchWorkstationForm.code" placeholder="工作站编号"/>
        </el-form-item>
        <el-form-item label="工作站名称">
          <el-input v-model="searchWorkstationForm.name" placeholder="工作站名称"/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="loadWorkstationList" >搜索</el-button>
          <el-button @click="resetSearchWorkstation">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin:15px">
      <el-radio-group v-model="selectedWorkstationCode" style="width: 100%">
        <el-table
            :data="workstationList"
            stripe
            border
            width="100%"
        >
          <el-table-column>
            <template #default="scope">
              <!-- 绑定工作站编码 -->
              <el-radio :value="scope.row.code"/>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="工作站编码"/>
          <el-table-column prop="name" label="工作站名称"/>
          <el-table-column prop="workshopId" label="所属车间编号"/>
          <el-table-column prop="location" label="工作站地点"/>
          <el-table-column prop="processId" label="所属工序编号"/>
          <el-table-column prop="description" label="工作站描述"/>
        </el-table>
      </el-radio-group>
    </el-row>
    <el-row>
      <el-button @click="doSelectWorkstation">确定</el-button>
    </el-row>
  </el-dialog>

  <!-- 生产任务弹窗 -->
  <el-dialog
      v-model="taskDialogVisible"
      width="80%"
      @close="handleTaskDialogClose"
  >
    <el-row style="margin:15px">
      <el-radio-group v-model="selectedTaskId" style="width: 100%">
        <el-table
            :data="taskList"
            stripe
            border
            width="100%"
        >
          <el-table-column>
            <template #default="scope">
              <!-- 绑定工作站编码 -->
              <el-radio :value="scope.row.id"/>
            </template>
          </el-table-column>
          <el-table-column prop="process.processCode" label="工序编号"/>
          <el-table-column prop="process.processName" label="工序名称"/>
          <el-table-column prop="prepTime" label="准备时间(min)"/>
          <el-table-column prop="waitTime" label="等待时间(min)"/>
          <el-table-column prop="ganttColor" label="甘特图颜色">
            <template v-slot="scope">
              <el-color-picker v-model="scope.row.ganttColor" disabled/>
            </template>
          </el-table-column>
        </el-table>
      </el-radio-group>
    </el-row>
    <el-row>
      <el-button @click="doSelectTask">确定</el-button>
    </el-row>
  </el-dialog>

</template>
<script setup>
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {getDictDataList} from "@/api/dictData.js";
import {
  batchDelete,
  deleteById,
  selectById,
  selectProductionReport,
  updateProductionReport, updateStatus1, updateStatus2, updateStatus3
} from "@/api/production-report.js";
import {selectWorkstationByCode,selectWorkstation} from "@/api/workstation.js";
import {getProductionOrderList, selectByProductionOrderCode, updateStatusById} from "@/api/production-order.js";
import {selectByTaskId, selectTask} from "@/api/workflowProcess.js";
// 搜索表单数据
const searchForm = ref({
  productionReportCode: '',
  productionReportName: '',
  productionReportType: '',
  workflowProcessId: '',
  productionOrderId: '',
  workstationCode: '',
  status: ''
});
// 工单类型字典列表
const productionOrderTypeDictDataList = ref([]);
// 工单状态字典列表
const productionOrderStatusDictDataList = ref([]);
//报工类型字典数据
const productionReportTypeDictDataList = ref([]);
//报工状态字典数据
const productionReportStatusDictDataList = ref([]);
//报工列表
const productionReportList = ref([]);
//选中的报工单
const selectedProductionReport = ref([])
//工单列表
const productionOrderList = ref([]);
//工作站列表
const workstationList = ref([]);
//生产任务列表
const taskList = ref([]);
//分页对象
const pagination = ref({
  pageSize: 5,
  currentPage: 1,
  total: 0
});
//弹窗标题
const dialogTitle = ref('');
//报工表单
const productionReportForm = ref({
  id: '',
  productionOrderType: '',
  productionReportCode: '',
  workstationCode:'',
  workflowProcess:{
    process:{
      processName:''
    }
  },
  productionOrder: {
    productionOrderCode:'',
    material: {
      code: '',
      name: '',
      specification: '',
      unit: {
        name: ''
      }
    }
  },
  productionReportQuantity: '',
  creatorId: '',
  updateTime: '',
  updatorId: '',
  status: ''
});

//弹窗标记
const addOrUpdateDialogVisible = ref(false);
//修改标志标记
const isDetail = ref(false);
//编辑标记
const isEdit = ref(false);
//新增标记
const isAdd = ref(false);
//工单列表弹窗标记
const productionOrderDialogVisible = ref(false);
//工作站列表弹窗标记
const workstationDialogVisible = ref(false);
//生产任务列表弹窗标记
const taskDialogVisible = ref(false);
//选择工单的工单编号
const selectedProductionOrderCode = ref('');
//选择工作站的工作站编号
const selectedWorkstationCode = ref('');
//选择生产任务的任务名称
const selectedTaskId = ref('');
//当前选择的选择的工单的工单ID
const currentProductionOrderId = ref('');
//当前选择的选择的工单的工单ID
const currentTaskId = ref('');
//搜索工单表单
const searchProductionOrderForm = ref({
  productionOrderCode: "",
  productionOrderName: "",
  status: "",
  productionOrderSource: "",
  productionOrderType: ""
});
//搜索工作站表单
const searchWorkstationForm = ref({
  code:'',
  name:''
});
//检测通过报工单
const confirmProductionReportForm = (row) => {
  ElMessageBox.confirm(
      `确定此报工单"${row.productionReportCode}"检测通过吗？`,
      "确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
  ).then(() => {
    updateStatus1(row.id).then((res) => {
      if (res.code === 200) {
        ElMessage.success("状态更改成功");
        cancelAddOrUpdate();
        loadProductionReportList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}
//审核通过报工单
const approveProductionOrderForm = (row) => {
  ElMessageBox.confirm(
      `确定此报工单"${row.productionReportCode}"审核通过吗？`,
      "确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
  ).then(() => {
    updateStatus2(row.id).then((res) => {
      if (res.code === 200) {
        ElMessage.success("状态更改成功");
        cancelAddOrUpdate();
        loadProductionReportList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}
//审核不通过报工单
const notApproveProductionOrderForm = (row) => {
  ElMessageBox.confirm(
      `确定此报工单"${row.productionReportCode}"审核不通过吗？`,
      "确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }
  ).then(() => {
    updateStatus3(row.id).then((res) => {
      if (res.code === 200) {
        ElMessage.success("状态更改成功");
        cancelAddOrUpdate();
        loadProductionReportList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
}
//选择工单
const doSelectProductionOrder = () => {
  if (!selectedProductionOrderCode.value) {
    ElMessage.warning("请先选择工单");
    return;
  }
  selectByProductionOrderCode(selectedProductionOrderCode.value).then(res => {
    const productionOrderData = res.data;
    currentProductionOrderId.value = productionOrderData.id;//记录当前选择的工单ID
    productionReportForm.value.productionOrder.productionOrderCode = productionOrderData.productionOrderCode;
    productionReportForm.value.productionOrder.material.code = productionOrderData.material.code;
    productionReportForm.value.productionOrder.material.name = productionOrderData.material.name;
    productionReportForm.value.productionOrder.material.specification = productionOrderData.material.specification;
    productionReportForm.value.productionOrder.material.unit.name = productionOrderData.material.unit.name;
    productionOrderDialogVisible.value = false;
  }).catch(err => {
    ElMessage.error("获取工单信息失败");
    console.error(err);
  });
}
//选择工作站
const doSelectWorkstation = () => {
  if (!selectedWorkstationCode.value) {
    ElMessage.warning("请先选择工作站");
    return;
  }
  selectWorkstationByCode(selectedWorkstationCode.value).then(res => {
    productionReportForm.value.workstationCode = selectedWorkstationCode.value;
    workstationDialogVisible.value = false;
  }).catch(err => {
    ElMessage.error("获取工作站信息失败");
    console.error(err);
  });
}
//选择生产任务
const doSelectTask = () => {
  if (!selectedTaskId.value) {
    ElMessage.warning("请先选择生产任务");
    return;
  }
  selectByTaskId(selectedTaskId.value).then(res => {
    currentTaskId.value = res.data.id//记录当前选择的生产任务ID
    productionReportForm.value.workflowProcess.process.processName = res.data.process.processName;
    taskDialogVisible.value = false;
  }).catch(err => {
    ElMessage.error("获取生产任务信息失败");
    console.error(err);
  });
}
//重置工单搜索栏
const resetSearchProductionOrder = () => {
  searchWorkstationForm.value.productionOrderCode = "";
  searchWorkstationForm.value.productionOrderName = "";
  searchWorkstationForm.value.status = "";
  searchWorkstationForm.value.productionOrderSource = "";
  searchWorkstationForm.value.productionOrderType = "";
}
//重置工作站搜索栏
const resetSearchWorkstation = () => {
  searchWorkstationForm.value.code = "";
  searchWorkstationForm.value.name = "";
}
//多条件搜索工作站
const loadProductionOrderList = ()=>{
  getProductionOrderList(1,10000, searchProductionOrderForm.value).then((res) => {
    productionOrderList.value = res.data.list;
  });
}

//多条件搜索工作站
const loadWorkstationList = () => {
  selectWorkstation(searchWorkstationForm.value).then(res=>{
    workstationList.value = res.data;
  })
}
//工单列表弹窗关闭时，重置选中的工单编码
const handleProductionOrderDialogClose = () => {
  selectedProductionOrderCode.value = '';
};
//工作站列表弹窗关闭时，重置选中的工作站编码
const handleWorkstationDialogClose = () => {
  selectedWorkstationCode.value = '';
};
//生产任务列表弹窗关闭时，重置选中的生产任务编码
const handleTaskDialogClose = () => {
  selectedTaskId.value = '';
};

//展示工单列表
const showProductionOrderList = () => {
  productionOrderDialogVisible.value = true;
  loadProductionOrderList();
}
//展示工作站列表
const showWorkstationList = () => {
  workstationDialogVisible.value = true;
  loadWorkstationList();
}
//加载生产任务列表
const loadTaskList = () => {
  selectTask().then(res=>{
    taskList.value = res.data;
  })
}
//展示工作站列表
const showTaskList = () => {
  taskDialogVisible.value = true;
  loadTaskList();
}
// 处理选中项变化
const handleSelectionChange = (selection) => {
  selectedProductionReport.value = selection
}
//批量删除报工单
const handleBatchDelete = () => {
  ElMessageBox.confirm(
      `确定要删除选中的 ${selectedProductionReport.value.length} 个用户吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    let params = "";
    selectedProductionReport.value.forEach(item => {
      params += "id=" + item.id + "&"
    })
    params = params.substring(0, params.length - 1)
    batchDelete(params).then(res => {
      ElMessage.success('删除成功')
      loadProductionReportList();
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
};
//弹窗关闭
const closeDialog = () => {
  cancelAddOrUpdate();
}
//取消按钮
const cancelAddOrUpdate = () => {
  addOrUpdateDialogVisible.value = false;
  productionReportForm.value = {
    id: '',
    productionOrderType: '',
    productionReportCode: '',
    workstationCode:'',
    workflowProcess:{
      process:{
        processName:''
      }
    },
    productionOrder: {
      productionOrderCode:'',
      material: {
        code: '',
        name: '',
        specification: '',
        unit: {
          name: ''
        }
      }
    },
    productionReportQuantity: '',
    creatorId: '',
    updateTime: '',
    updatorId: '',
    status: ''
  };
}
// 提交按钮事件
const handlerSubmit = () => {
  //判断是否是新增
  if (isEdit.value) {
    // 编辑
    productionReportForm.value.productionOrderId = currentProductionOrderId.value;
    productionReportForm.value.workflowProcessId = currentTaskId.value;
    const params = {
      id: productionReportForm.value.id,
      productionReportType: productionReportForm.value.productionReportType,
      productionReportCode: productionReportForm.value.productionReportCode,
      productionOrderId:productionReportForm.value.productionOrderId,
      workstationCode:productionReportForm.value.workstationCode,
      workflowProcessId: productionReportForm.value.workflowProcessId,
      productionReportQuantity:productionReportForm.value.productionReportQuantity,
      creatorId: productionReportForm.value.creatorId,
      updateTime: productionReportForm.value.updateTime,
      updatorId: productionReportForm.value.updatorId,
      status: productionReportForm.value.status,
    }
    updateProductionReport(params).then(res => {
      if (res.code == 200) {
        ElMessage.success("编辑成功");
        cancelAddOrUpdate();
        // 刷新列表
        loadProductionReportList();
      } else {
        ElMessage.error(res.msg);
      }
    })
  } else {
    // 新增
    // addCommonDefect(productionReportForm.value).then(res => {
    //     if (res.code == 200) {
    //         ElMessage.success("新增成功");
    //         cancelAddOrUpdate();
    //         // 刷新列表
    //         loadProductionReportList();
    //     } else {
    //         ElMessage.error(res.msg);
    //     }
    // })
  }
}
//新增报工弹窗
const handleAdd = () => {
  dialogTitle.value = "新增报工";
  addOrUpdateDialogVisible.value = true;
  isEdit.value = false;
  isAdd.value = true;
  isDetail.value = false;
}
//页面大小变化
const handleSizeChange = (newSize) => {
  pagination.value.pageSize = newSize;
  loadProductionReportList();
}
//当前页面变化
const handleCurrentChange = (pageNum) => {
  pagination.value.currentPage = pageNum;
  loadProductionReportList();
}
//编辑按钮
const handleEdit = (row) => {
  dialogTitle.value = "编辑报工";
  isEdit.value = true;
  isAdd.value = true;
  isDetail.value = true;
  selectById(row.id).then(res => {
    if (res.code == 200) {
      productionReportForm.value = res.data;
      addOrUpdateDialogVisible.value = true;
    }
  })
}
//删除按钮
const handleDelete = (row) => {
  ElMessageBox.confirm(
      `确定要删除确实 "${row.name}" 吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    deleteById(row.id).then(res => {
      ElMessage.success('删除成功')
      loadProductionReportList();
    })
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
//审核按钮
const handleReview = (row) => {
  dialogTitle.value = "审核报工";
  isEdit.value = false;
  isAdd.value = false;
  isDetail.value = true;
  selectById(row.id).then(res => {
    if (res.code == 200) {
      productionReportForm.value = res.data;
      addOrUpdateDialogVisible.value = true;
    }
  })
}
//加载报工列表
const loadProductionReportList = () => {
  selectProductionReport(pagination.value.currentPage, pagination.value.pageSize, searchForm.value).then(res => {
    productionReportList.value = res.data.list;
    pagination.value.total = res.data.total;
  })
}
// 加载工单状态字典
const loadProductionOrderStatusDictDataList = () => {
  getDictDataList({ dictType: "PRODUCTION_ORDER_STATUS" }).then((res) => {
    productionOrderStatusDictDataList.value = res.data.records;
  });
};
// 加载工单类型字典
const loadProductOrderDictDataList = () => {
  getDictDataList({ dictType: "PRODUCTION_ORDER_TYPE" }).then((res) => {
    productionOrderTypeDictDataList.value = res.data.records;
  });
};
//加载报工类型字典数据
const loadProductionReportTypeDictDataList = () => {
  getDictDataList({dictType: 'PRODUCTION_REPORT_TYPE'}).then(res => {
    productionReportTypeDictDataList.value = res.data.records;
  });
}
//加载报工类型字典数据
const loadProductionReportStatusDictDataList = () => {
  getDictDataList({dictType: 'PRODUCTION_REPORT_STATUS'}).then(res => {
    productionReportStatusDictDataList.value = res.data.records;
  });
}
//重置按钮
const resetSearch = () => {
  searchForm.value.productionReportCode = "";
  searchForm.value.productionReportName = "";
  searchForm.value.productionReportType = "";
  searchForm.value.workflowProcessId = "";
  searchForm.value.productionOrderId = "";
  searchForm.value.materialCode = "";
  searchForm.value.status = "";
}
//页面一加载就触发
onMounted(() => {
  loadProductionReportTypeDictDataList();
  loadProductionReportStatusDictDataList();
  loadProductionOrderStatusDictDataList();
  loadProductOrderDictDataList();
  loadProductionReportList()
});
</script>
<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>